<!DOCTYPE html>
<html lang="cn-zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>维龙大屏可视化</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/flexible.min.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/echarts-liquidfill.min.js"></script>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <!-- 头部 -->
    <header>
        <h1>Echarts大屏可视化</h1>
        <img src="./img/anj.png" alt="">
    </header>
    <!-- 主体 -->
    <div class="bodybox">
        <section>
            <!-- 每天包装,出箱单产量 -->
            <div class="sbox">
                <div id="c1" class="charts"></div>
            </div>
            <!-- 合同完成周期比 -->
            <div class="sbox">
                <div id="c2" class="charts"></div>
            </div>
        </section>
        <section>
            <!-- 数字模块 -->
            <div class="num">
                <div class="numhd">
                    <ul>
                        <li>123</li>
                        <li>456</li>
                        <li>789</li>
                    </ul>
                </div>
                <div class="numbd">
                    <ul>
                        <li>今日接收任务</li>
                        <li>今日包装</li>
                        <li>今日出箱单</li>
                    </ul>
                </div>
            </div>
            <div class="ds">
                <div class="charts">
                    <div id="c8" class="con"></div>
                    <div id="c9" class="con"></div>
                </div> 
            </div>
            <div class="ds">
                <h3>未完成状态分布</h3>
                <div class="charts">
                    <div id="c10" class="chartw">1</div>
                    <div id="c11" class="chartw">2</div>
                    <div id="c12" class="chartw">3</div>
                    <div id="c13" class="chartw">4</div>
                    <div id="c14" class="chartw">5</div>
                </div>
            </div>
        </section>
        <section>
            <div class="sbox">
                <div class="charts">
                    <div class="c15div">
                        <div id="c15-01" class="c15d"></div>
                        <div id="c15-02" class="c15d"></div>
                        <div id="c15-03" class="c15d"></div>
                    </div>
                    <div class="c15div">
                        <div id="c15-04" class="c15b"></div>
                        <div id="c15-05" class="c15b"></div>
                        <div id="c15-06" class="c15b"></div>
                        <div id="c15-07" class="c15b"></div>
                    </div>
                </div>
            </div>
            <div class="sbox">
                <!-- 总收敛周期 -->
                <div id="c16" class="charts"></div>
            </div>
        </section>
    </div>
    <script src="./chartJS/charts.js"></script>
</body>
</html>